<template>
  <div class="g-register-block">
    <div class="m-leftpic">
      <img src="https://img.imgdb.cn/item/606488cd8322e6675ccb2ba2.png">
    </div>
    <div class="m-rigister-right">
      <div class="m-rigister-right">
        <div class="form">
          <div class="z">
            <el-switch
                v-model="useCode"
                size="large"
                active-text="使用验证码登录（新用户将自动注册）"
                inactive-text="使用密码登录"
            />
            <h1 class="font-46">欢迎来到QueOJ</h1>
            <h3 class="font-28 margin-top16 margin-bottom50">—— 专注于程序员成长的平台</h3>
            <template v-if="useCode">
              <div class="m-line">
                <el-input class="m-input-text"
                          input-style="height:100%;position:relative;left:-10px;"
                          size="large"
                          placeholder="邮箱地址"
                          type="email"
                          v-model="email"
                          @input="handleInput"/>
              </div>
              <div class="m-input-hint" v-show="emailWarnging">邮箱格式错误！</div>
              <div class="m-line">
                <el-input class="m-input-text m-code-input" type="number"
                          input-style="height:100%;position:relative;left:-10px;" v-model='code' placeholder="邮箱验证码"
                          @input="handleCodeInput"/>
                <el-button type="primary" class="m-code-btn" v-bind:disabled="sendCodeDiasbled" @click="handleSendCode">
                  {{ sendButtonContent }}
                </el-button>
              </div>
              <div class="m-input-hint" v-show="codeWarnging">请输入正确的四位验证码！</div>

              <div class="m-line">
                <el-button type="primary" class="m-register-btn" v-bind:disabled="verifyCodeDisabled"
                           @click="handleVerifyCode">立即登录
                </el-button>
              </div>
            </template>
            <template v-else>
              <div class="m-input-hint" style="color: #ccc;" >
                <div style="position: absolute;top: -20px;width: 200px">
                  新用户无法使用密码登录
                </div>
              </div>
              <div class="m-line">
                <el-input class="m-input-text"
                          input-style="height:100%;position:relative;left:-10px;"
                          size="large"
                          placeholder="邮箱地址"
                          type="email"
                          v-model="email"
                          @input="handleInput"/>
              </div>
              <div class="m-input-hint" v-show="emailWarnging">邮箱格式错误！</div>
              <div class="m-line">
                <el-input class="m-input-text"
                          input-style="height:100%;position:relative;left:-10px;"
                          size="large"
                          placeholder="密码"
                          type="password"
                          v-model="password"
                          @input="handlePasswordInput"/>
              </div>
              <div class="m-input-hint" v-show="loginPasswordDisabled">密码不小于6位！</div>
              <div class="m-line">
                <el-button type="primary" class="m-register-btn" v-bind:disabled="loginPasswordDisabled || emailWarnging"
                           @click="loginByPassword">立即登录
                </el-button>
              </div>
            </template>

          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {User} from '../utils/http/user'


export default {
  name: "Login",
  created() {
    if (this.$store.state.isLogin) {
      this.$goRoute('/space')
    }
  },
  data: function () {
    return {
      useCode: true,
      code: "",
      email: "",
      password: "",
      constEmail: "",
      sendButtonContent: "获取验证码",
      emailWarnging: false,
      codeWarnging: false,
      sendCodeDiasbled: true,
      verifyCodeDisabled: true,
      loginPasswordDisabled: false,
      restTime: 0,

      secondCode: "",
      result: 0,
      sendData: {
        birthday: 2021 - 1 - 1,
        email: '853681401@qq.com',
        address: 'hzsfdx',
        nickname: 'bqbq',
        clazz: 1
      },
    }
  },
  methods: {
    handleInput() {
      if (this.validateMail(this.email)) {
        this.sendCodeDiasbled = false;
        this.emailWarnging = false;
      } else {
        this.sendCodeDiasbled = true;
        this.emailWarnging = true;
      }
    },
    validateMail(email) {
      let reg = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
      return reg.test(email);
    },
    async handleSendCode() {
      let resp = await User.getVerifyEmail(this.email)
      if (!resp.success) {
        this.$message.error(resp.message)
      } else {
        this.$message.success("发送成功！")
        this.sendCodeDiasbled = true;
        this.restTime = 60;
        let timer = setInterval(() => {
          this.sendButtonContent = (this.restTime--) + "秒后重新发送";
          if (this.restTime === 0) {
            clearInterval(timer)
            this.sendCodeDiasbled = !this.validateMail(this.email);
            this.sendButtonContent = "获取验证码";
          }
        }, 1000)

      }
    },
    handleCodeInput() {
      if (this.validateCode(this.code)) {
        this.verifyCodeDisabled = false;
        this.codeWarnging = false;
      } else {
        this.verifyCodeDisabled = true;
        this.codeWarnging = true;
      }
    },
    handlePasswordInput(){
      this.loginPasswordDisabled = this.password.length < 6;
    },
    validateCode(code) {
      return code.length === 4;
    },
    async handleVerifyCode() {
      let resp = await User.loginByCode(this.email, this.code)
      if (resp.success) {
        this.$message.success("登录成功！");
        this.$goRoute('/space')
      } else {
        this.$message.error(resp.message);
      }
    },
    async loginByPassword(){
      let resp = await User.loginByPassword(this.email, this.password)
      if (resp.success) {
        this.$message.success("登录成功！");
        this.$goRoute('/space')
      } else {
        this.$message.error(resp.message);
      }
    }
  }
}
</script>

<style scoped>
.m-line-left {
  width: 150px;
  font-size: 24px;
}

.m-line-right {
  font-size: 24px;
}

.m-line-show {
  margin-top: 50px;
  width: 500px;
  display: flex;
  justify-content: space-between;
}

.m-line-btns {
  margin-top: 50px;
  width: 500px;
  display: flex;
  justify-content: space-between;
}

.m-leftpic img {
  height: 100%;
}

.g-register-block {
  height: 100%;
  display: flex;
}

.m-rigister-right {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.form {
  padding-top: 70px;
  width: 520px;
  text-align: center;
  margin: 0 auto;
}

.z {
  text-align: left;
}

.font-46 {
  font-size: 46px;
}

.font-28 {
  font-size: 28px;
}

.margin-top16 {
  margin-top: 16px;
}

.margin-bottom50 {
  margin-bottom: 50px;
}

.m-email-input {
  width: 100%;
}

.m-code-input {
  width: 150px;
}

.m-input-text {
  height: 52px;
  text-indent: 10px;
  border-radius: 5px;
  font-size: 20px;
}

.m-input-text-short {
  height: 40px;
  border-radius: 5px;
  font-size: 20px;
}

.m-code-btn {
  width: 300px;
  height: 52px;
  font-size: 20px;
}

.m-submit-btn {
  width: 150px;
  height: 52px;
  font-size: 20px;
}

.m-register-btn {
  width: 100%;
  height: 52px;
  font-size: 20px;
}

.m-line {
  margin-top: 50px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.m-input-hint {
  position: absolute;
  font-size: 14px;
  color: #ff582c;
}

.m-100w {
  width: 100%;
  margin-top: 30px;
}

input::-webkit-input-placeholder {
  font-size: 16px;
}

input {
  outline-color: #3689FF;
}

.m-result {
  margin: 200px auto;
  font-size: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #3689FF;
}

.m-result-icon {
  font-size: 250px;
}

@media (max-width: 550px) {
  .m-leftpic {
    display: none;
  }

  .form {
    max-width: 350px;
    margin: 0 auto;
  }

  .m-rigister-right {
    max-width: 350px;
  }

  .m-line {
    max-width: 350px;
  }

  .g-register-block {
    display: flex;
    justify-content: center;
  }

  .m-code-btn {
    width: 150px;
    font-size: 16px;
  }

  .m-line-show {
    flex-direction: column;
    padding-left: 20px;
    margin-top: 30px;
  }

  .m-line-btns {
    max-width: 350px;
  }
}

@media (max-width: 1150px) {
  .m-leftpic {
    display: none;
  }
}

@media (min-width: 1151px) {
  .m-leftpic {
    display: block;
  }
}
</style>
